<template>
    <div class="banner">
        <div class="banner_img"  @mouseenter="pauseAutoSlide" @mouseleave="startAutoSlide" :style="`background-image: url(${$baseUrl + bannerImg})`"  @click="open_game(game_id)"></div>
        <div class="slidebox">
            <div class="item" :class="{ active: nav_index === 0 }" @click="setNav(0)"></div>
            <div class="item" :class="{ active: nav_index === 1 }" @click="setNav(1)"></div>
            <div class="item" :class="{ active: nav_index === 2 }" @click="setNav(2)"></div>
        </div>
        <!-- 首页登录窗 -->
        <Login2 class="login2"/> 
    </div>
</template>

<script setup>
import axios from '@/utils/api';
import Login2 from '@/components/Login2/index.vue';
import { ref, onMounted, onBeforeUnmount,reactive  } from 'vue';
import {useGetGameUrl} from '@/hooks/getGameUrl'
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useRouter } from "vue-router"
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const router = useRouter()
let banner_list = ref([]);
let bannerImg = ref('');
const nav_index = ref(0);
let interval = null;

let game_id = ref('');
let game_name = ref('')
const getHomeBannerList = async () => {
    const banner = await axios.get('/gameBannerList');
    banner_list.value = banner.data;
    bannerImg.value = banner_list.value[0].game_banner_img;
    game_id.value = banner_list.value[0].id;
    game_name.value = banner_list.value[0].title;
};

const setNav = (index) => {
    nav_index.value = index;
    bannerImg.value = banner_list.value[index].game_banner_img;
    game_id.value = banner_list.value[index].id;
    game_name.value = banner_list.value[index].title;
};

const startAutoSlide = () => {
    interval = setInterval(() => {
        nav_index.value = (nav_index.value + 1) % banner_list.value.length; // 循环切换
        bannerImg.value = banner_list.value[nav_index.value].game_banner_img;
        game_id.value = banner_list.value[nav_index.value].id;
        game_name.value = banner_list.value[nav_index.value].title;
    },3000); // 每3秒切换一次
};

onMounted(() => {
    getHomeBannerList();
    startAutoSlide();
});
const pauseAutoSlide = () => {
    clearInterval(interval);
};

onBeforeUnmount(() => {
    clearInterval(interval); // 清除定时器以避免内存泄漏
});

const open_game = async (game_id) => {

    const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: game_name.value } }).href;
    window.open(url)
    
}
</script>

<style lang="less" scoped>
.banner {
    width: 1200px;
    height: 445px;
    position: relative;
    .banner_img{
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        transition: all 1s;
        position: relative;
        cursor: pointer;
        
    }
    .slidebox {
        position: absolute;
        display: flex;
        right: 90px;
        bottom: 25px;
        .item {
            width: 45px;
            height: 16px;
            background-color: #8a8a8a;
            border-radius: 12px;
            margin-right: 10px;
            cursor: pointer;
        }
        .item:hover {
            background-color: #409eff !important;
        }
        .active {
            background-color: #409eff !important;
        }
    }
    .login2{
        position: absolute;
        left: 3%;
        top: 20px;
        border-radius: 5px;
        box-shadow: 1px 3px 10px 3px rgba(0, 0, 0, 0.3);
    }
}
</style>
